<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* display: none;
            visibility: hidden;
            opacity: 0; */
            background-color: #f00;
        }

        div:hover {
            /* color: red; */
            height: 100px;
        }
    </style>
</head>

<body>
    <div>111</div>

    2222


    <ul>
        <!-- <li></li> -->
    </ul>

    <script>


        // 渲染页面

        // 重绘：重新绘画  --- 颜色等发生改变的时候，会引起页面的重绘
        // 回流：    属性发生改变导致结构跟着改变，会引起页面的回流


        // 回流必定引发重绘，重绘不一定引发回流

        // 回流的代价远大于重绘



        var arr = ['新闻1', '新闻1', '新闻1'];



        // 进行DOM操作的时候，页面会有回流 ， 尽量的减少页面的回流


        var oUl = document.querySelector('ul');

        // 把这些要放到Ul中的li都先存放在res这个字符串中，最后一次加载到ul中  ---  回流就只有一次
        var res = ''
        for (var i = 0; i < arr.length; i++) {
            res += `<li>${arr[i]}</li>`;

        }

        oUl.innerHTML = res;

    </script>

</body>

</html>